<template>
  <div>
    <van-nav-bar title="十二生肖运势" left-arrow @click-left="onClickLeft" />
    <van-row>
      <van-col span="24" v-for="(horoscope, zodiac) in horoscopes" :key="zodiac">
        <van-card :title="getZodiacText(zodiac)" :desc="`五行: ${horoscope.element}`" :thumb="getZodiacImage(zodiac)">
          <template #tags>
            <van-tag plain>{{ getZodiacText(zodiac) }}</van-tag>
          </template>
          <template #footer>
            <div class="card-body">
              <div>今日概述: {{ horoscope.overview }}</div>
              <div>爱情运势: {{ horoscope.love }}</div>
              <div>事业运势: {{ horoscope.career }}</div>
              <div>财运运势: {{ horoscope.finance }}</div>
              <div>健康运势: {{ horoscope.health }}</div>
              <div>幸运颜色: {{ horoscope.luckyColor }}</div>
              <div>幸运数字: {{ horoscope.luckyNumber }}</div>
              <div>建议: {{ horoscope.advice }}</div>
            </div>
          </template>
        </van-card>
      </van-col>
    </van-row>
  </div>
</template>

<script setup>
const onClickLeft = () => history.back()

const horoscopes = {
  rat: {
    element: '水',
    overview: '今天的运势较好，适合开展新计划。',
    love: '感情方面会有一些小惊喜。',
    career: '工作中可能会遇到一些困难，但都能解决。',
    finance: '财运普通，注意开支。',
    health: '身体状况良好，但要注意保持锻炼。',
    luckyColor: '蓝色',
    luckyNumber: '8',
    advice: '保持积极的心态，迎接每一个挑战。',
  },
  ox: {
    element: '土',
    overview: '今天适合整理思路，做出重要决策。',
    love: '感情平稳，可以考虑一起做些计划。',
    career: '工作中会有一些新的机会，抓住它们。',
    finance: '财运较好，适合投资。',
    health: '注意饮食，不要暴饮暴食。',
    luckyColor: '黄色',
    luckyNumber: '5',
    advice: '稳重前行，不急不躁。',
  },
  tiger: {
    element: '木',
    overview: '今天适合探索新领域，尝试新事物。',
    love: '感情上可能会有一些波折，要多沟通。',
    career: '工作上会有一些挑战，但你会从中成长。',
    finance: '财运较好，可以适当投资。',
    health: '注意休息，不要过度劳累。',
    luckyColor: '绿色',
    luckyNumber: '3',
    advice: '大胆尝试新事物，但也要小心谨慎。',
  },
  rabbit: {
    element: '木',
    overview: '今天适合静心思考，制定长远计划。',
    love: '感情上会有一些温馨的时刻。',
    career: '工作中可能会遇到一些新的机会。',
    finance: '财运较好，可以适当投资。',
    health: '注意休息，保持良好的作息。',
    luckyColor: '粉色',
    luckyNumber: '6',
    advice: '保持平和心态，不急不躁。',
  },
  dragon: {
    element: '土',
    overview: '今天适合发挥你的领导才能。',
    love: '感情上会有一些进展。',
    career: '工作中可能会有新的挑战。',
    finance: '财运较好，可以考虑投资。',
    health: '注意休息，不要过度劳累。',
    luckyColor: '红色',
    luckyNumber: '9',
    advice: '大胆行动，但要量力而行。',
  },
  snake: {
    element: '火',
    overview: '今天适合制定详细的计划。',
    love: '感情上可能会有些波折。',
    career: '工作中可能会遇到一些困难。',
    finance: '财运普通，注意开支。',
    health: '身体状况良好。',
    luckyColor: '紫色',
    luckyNumber: '2',
    advice: '保持冷静，迎接挑战。',
  },
  horse: {
    element: '火',
    overview: '今天适合冒险和探索新领域。',
    love: '感情上可能会有新进展。',
    career: '工作中可能会有新的机会。',
    finance: '财运较好，可以考虑投资。',
    health: '身体状况良好。',
    luckyColor: '橙色',
    luckyNumber: '7',
    advice: '勇敢追求你的目标。',
  },
  goat: {
    element: '土',
    overview: '今天适合与人合作，共同完成目标。',
    love: '感情上会有一些温馨的时刻。',
    career: '工作中可能会遇到一些新的机会。',
    finance: '财运普通，注意开支。',
    health: '身体状况良好。',
    luckyColor: '绿色',
    luckyNumber: '4',
    advice: '保持耐心，稳步前进。',
  },
  monkey: {
    element: '金',
    overview: '今天适合发挥你的创造力。',
    love: '感情上可能会有新发展。',
    career: '工作中可能会有一些新的挑战。',
    finance: '财运较好，可以考虑投资。',
    health: '身体状况良好。',
    luckyColor: '白色',
    luckyNumber: '6',
    advice: '大胆创新，勇于尝试。',
  },
  rooster: {
    element: '金',
    overview: '今天适合整理思路，制定详细计划。',
    love: '感情上可能会有些小波折。',
    career: '工作中可能会遇到一些新的机会。',
    finance: '财运普通，注意开支。',
    health: '身体状况良好。',
    luckyColor: '金色',
    luckyNumber: '5',
    advice: '保持冷静，迎接挑战。',
  },
  dog: {
    element: '土',
    overview: '今天适合与人交流，分享你的想法。',
    love: '感情上会有一些温馨的时刻。',
    career: '工作中可能会遇到一些新的机会。',
    finance: '财运普通，注意开支。',
    health: '身体状况良好。',
    luckyColor: '咖啡色',
    luckyNumber: '1',
    advice: '保持积极的心态，迎接每一个挑战。',
  },
  pig: {
    element: '水',
    overview: '今天适合放松身心，享受生活。',
    love: '感情上会有一些温馨的时刻。',
    career: '工作中可能会遇到一些新的机会。',
    finance: '财运较好，可以考虑投资。',
    health: '身体状况良好。',
    luckyColor: '黑色',
    luckyNumber: '0',
    advice: '放慢脚步，享受生活的美好。',
  },
}

const getZodiacText = zodiac => {
  const mapping = {
    rat: '鼠',
    ox: '牛',
    tiger: '虎',
    rabbit: '兔',
    dragon: '龙',
    snake: '蛇',
    horse: '马',
    goat: '羊',
    monkey: '猴',
    rooster: '鸡',
    dog: '狗',
    pig: '猪',
  }
  return mapping[zodiac]
}

const getZodiacImage = zodiac => {
  const images = {
    rat: 'https://i.imgur.com/5YwkZ8P.png',
    ox: 'https://i.imgur.com/NMZxjWx.png',
    tiger: 'https://i.imgur.com/8NTr7bz.png',
    rabbit: 'https://i.imgur.com/P9ISFjf.png',
    dragon: 'https://i.imgur.com/y6UEVEb.png',
    snake: 'https://i.imgur.com/D2x5uq1.png',
    horse: 'https://i.imgur.com/XuTNeiG.png',
    goat: 'https://i.imgur.com/NWNsvTR.png',
    monkey: 'https://i.imgur.com/KNW97Zg.png',
    rooster: 'https://i.imgur.com/Thf3sNI.png',
    dog: 'https://i.imgur.com/jFhRFG6.png',
    pig: 'https://i.imgur.com/2Z4cM5O.png',
  }
  return ''
}
</script>

<style scoped>
.van-card {
  margin: 10px;
}
.van-nav-bar {
  background-color: #f5f5f5;
}

.card-body {
  text-align: left;
  padding: 10px;
}
</style>
